<!-- 包含volcno plot, scatter Plot, bar Chart火山图-散点图-柱状图 -->

<template>
  <div class="herb-comp-omics-overall">
    <TitleBox type=2>
        <template #titlecont>
            <span v-lang="{lang: controlSto.language, lgid: -124}">Gene expression analysis of </span>
            <span style="margin: 2px 0 0 5px;"> {{ expId || '--' }}</span>
        </template>
    </TitleBox>
    <div class="switch-box">
      <Genomics
				:dataBar="dataObj.dataBar"
				:volcanoDataDown="dataObj.volcanoDataDown"
				:volcanoDataNotSignificant="dataObj.volcanoDataNotSignificant"
				:volcanoDataUp="dataObj.volcanoDataUp"
				:dataScatter1="dataObj.dataScatter1"
				:dataScatter2="dataObj.dataScatter2"
				:dataScatter3="dataObj.dataScatter3"
        :vLoading="dataObj.vLoading"
        :sLoading="dataObj.sLoading"
        :bLoading="dataObj.bLoading"
        ref="genomics"
			/>
      
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';
import uiEchart from '@/components/ui-echart.vue'
import Genomics from '@/components/Genomics.vue';
import { controlStore } from '@/stores/control'
import { dataBar, volcanoDataDown, volcanoDataNotSignificant, volcanoDataUp, dataScatter1, dataScatter2, dataScatter3 } from '@/utils/datagraph'
import { volcanoMap, diagMap, chartMap } from "@/service/tcm"

const tabsnum = ref(1);
const controlSto = controlStore();
const genomics = ref(null);
const props = defineProps({
  detailId: {
    type: [Number, String],
    default: ''
  },
  expIdFlag: {
    default: 'Y',
    type: String
  },
  expId: {
    default: '',
    type: String
  }
})

const dataObj = reactive({
  volcanoDataDown: [],
  volcanoDataNotSignificant: [],
  volcanoDataUp: [],
  vLoading: false,
  sLoading: false,
  dataScatter1: [],
  dataScatter2: [],
  dataScatter3: [],
  bLoading: false,
  dataBar: []
})
const { expIdFlag, expId } = toRefs(props);
const emitter = defineEmits(['toCalc']);
onMounted(() => {
  const {stop} = useIntersectionObserver(
    genomics,
      ([{ isIntersecting }], observerElement) => {
          if (isIntersecting) {
              // 停止监听，如果你只想知道一次可视性变化
              toGetvolcanoMap();
              toGetScatterMap();
              toGetBarMap();
              //阻止再次请求
              stop()
          }
      },
      {
          threshold: 0, // 当交叉框达到视窗的这部分时触发
      }
  );
  
})
//火山图
const toGetvolcanoMap = () => {
  dataObj.vLoading = true;
  if (expIdFlag.value == 'N' || !expId.value) {
    dataObj.vLoading = false;
    dataObj.volcanoDataDown = [];
    dataObj.volcanoDataNotSignificant = [];
    dataObj.volcanoDataUp = [];
    return;
  }
  
  volcanoMap({erId: expId.value}).then(res => {
    if (res.success && res.data) {
      dataObj.vLoading = false;
      dataObj.volcanoDataDown = res.data.dataDown
      dataObj.volcanoDataNotSignificant = res.data.dataNotSignificant
      dataObj.volcanoDataUp = res.data.dataUp
    }
  })
}

const toGetScatterMap = () => {
  dataObj.sLoading = true;
  if (expIdFlag.value == 'N' || !expId.value) {
    dataObj.sLoading = false;
    dataObj.dataScatter1 = [];
    dataObj.dataScatter2 = [];
    dataObj.dataScatter3 = [];
    return;
  }
  
  diagMap({erId: expId.value}).then(res => {
    if (res.success && res.data) {
      dataObj.sLoading = false;
      dataObj.dataScatter1 = res.data.dataBp
      dataObj.dataScatter2 = res.data.dataCc
      dataObj.dataScatter3 = res.data.dataMf
    }
  })
}

const toGetBarMap = () => {
  dataObj.bLoading = true;
  if (expIdFlag.value == 'N' || !expId.value) {
    dataObj.bLoading = false;
    dataObj.dataBar = [];
    return;
  }
  
  chartMap({erId: expId.value}).then(res => {
    if (res.success && res.data) {
      dataObj.bLoading = false;
      dataObj.dataBar = res.data.data;
      console.log(dataObj.dataBar)
    }
  })
}
watch(() => expId.value, (n, v) => {
  if(n != v && v) {
    toGetvolcanoMap();
    toGetScatterMap();
    toGetBarMap();
  }
}, { immediate: true })
</script>

<style scoped lang="scss">
 .herb-comp-omics-overall {
    .switch-box {
      padding: 32px 0;
      text-align: center;
    }
  }
</style>
